<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>临停车辆</title>

    <link rel="stylesheet" href="../css/weui.css" />
    <link rel="stylesheet" href="../css/example.css" />
    <link rel="stylesheet" href="../css/plate.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/swiper.min.css">
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style>
        html,
        body {
            font-family: 'PingFangSC-Regular';
            width: 100%;
            height: 99%;
            background: #F5F5F9;
            color: rgba(51, 51, 51, 0.87);
            margin: 0;
            overflow-y: auto;
        }

        .weui-panel {
            top: 15px;
            border-radius: 6px;
            margin: 0px 15px 0px 15px;
        }

        .weui-panel__hd:after {
            border-bottom: none;
        }

        .weui-media-box {
            padding: 0px;
        }

        .hheader {
            display: flex;
            align-items: center;
            justify-items: center;
            padding: 10px 10px 10px 10px;

        }

        .order {
            width: 16px;
            height: 18px;
        }

        .weui-media-box_appmsg .weui-media-box__thumb {
            width: auto;
        }

        .title {
            color: #333333;
            margin-left: 8px;
        }

        .logo_car {
            width: 42px;
            height: 34px;

        }

        .middle {
            border: none;

        }

        .type_card {
            display: block;
            color: white;
            font-size: 10px;
            background-color: #00b4bb;
            padding: 3px 8px 3px 8px;
            border-radius: 5px;
            margin-top: 10px;
        }

        .weui-media-box_appmsg {
            align-items: flex-start;
            margin-top: 10px;
        }



        .weui-media-box__hd {
            margin-left: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

        .weui-media-box__title {
            font-weight: 600;
            font-size: 16px;
        }

        .weui-media-box__desc {
            margin-top: 4px;
        }

        .park_time {
            margin-top: 10px;
            color: #333333;
        }

        .park_time>span {
            margin-left: 5vw;
            color: #0051BB;
            font-weight: 600;
        }


        button.weui-btn_plain-default {
            border: none;
        }

        button.weui-btn {
            width: auto;
            color: #BF0000;
            font-size: 16px;
            border: 1px solid;
            line-height: 24px;
            padding: 6px 36px 6px 36px;
            margin: 20px 0px;
        }

        .weui-btn {
            display: inline;
        }

        /* .weui-media-box{
        position: unset;
    } */

        .block>img {
            width: 44px;
            height: 44px;
        }

        .weui-panel__ft {
            border-top: 1px solid #E5E5E5;
            margin: 0px 10px;
            padding: 10px 0px;
        }

        .kind_card {
            display: flex;
            justify-content: space-between;
            padding: 0px 20px;
        }

        .block {
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .block>span {
            font-size: 12px;
            margin: 6px;
        }

        .down {
            margin-top: 10px;
            background-color: #F5F5F9;
        }

        .ad {
            width: 100%;
        }

        .tip {
            color: #333333;
            margin-top: 10px;
            font-size: 12px;
        }

        .desc {
            color: #8b8b8b;
            margin-top: 4px;
            font-size: 10px;
        }

        /* 点击的css */
        .locked {
            color: #BF0000;
        }

        .unlocked {
            color: #0051BB;
        }

        .locked-other {
            color: #EAEAEA;
        }

        .locked-all {
            color: #818181;
        }

        .lock-info,
        .unlock-info {
            height: 80px;
            text-align: center;
            display: none;
            flex-direction: column;
            justify-content: center;
        }

        .locked-height {
            color: #BF0000;
            font-size: 18px;
            line-height: 18px;
            margin-left: 10px;
            font-weight: 500;
        }

        .unlocked-height {
            color: #0051BB;
            font-size: 18px;
            line-height: 18px;
            margin-left: 10px;
            font-weight: 500;
        }

        .note {
            color: #AAAAAA;
            margin-top: 10px;
            font-size: 13px;
        }

        .cell_text:before,
        .cell_text::after {
            content: none;
        }

        .balance {
            color: #BF0000;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="weui-panel up">
            <div class="weui-panel__hd hheader">
                <img class="order" src="../images/Order@2x.png" alt="">
                <span class="title">正在进行中的订单</span>
            </div>
            <div class="weui-panel__bd middle">
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                        <img class="logo_car" src="../images/car-business@2x.png" alt="">
                        <span class="type_card">临停车</span>

                    </div>
                    <div class="weui-media-box__bd">
                        <h4 id="car_num" class="weui-media-box__title">车牌号</h4>
                        <p id="intime" class="weui-media-box__desc"></p>
                        <p class="weui-media-box__desc park_time">当前停车时长<span class="balance" id="duration">0</span></p>
                        <button id="temp_pay" class="weui-btn weui-btn_plain-default">临停缴费</button>
                    </div>
                </div>
            </div>
            <div class="weui-panel__ft">
                <div class="kind_card">
                    <div id="lock-car" class="block">
                        <img class="lock-img" src="../images/Lock-unlock@2x.png" alt="">
                        <span class="lock">
                            <span class="lock-text">锁定</span>
                            <span>/</span>
                            <span class="unlock-text">解锁</span>
                        </span>
                    </div>
                    <div id="stored_card" class="block">
                        <img src="../images/Storage card recharge@2x.png" alt="">
                        <span>储值卡充值</span>
                    </div>
                    <div class="block" id="month_card">
                        <img src="../images/Monthly renewal fee@2x.png" alt="">
                        <span>月卡续费</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 锁车 -->
        <div class="weui-panel lock-info cell_text" style="background:#F5F5F9">
            <div class="weui-panel-hd">
                <img src="../images/locking@2x.png" alt="" style="width: 25px;vertical-align: middle;">
                <span class="locked-height">车辆已锁定</span>
            </div>
            <div class="weui-panel-db" style="margin-top: 10px;">
                <span class="note">提示：车辆已锁定，请解锁离场！</span>
            </div>
        </div>
        <div class="weui-panel unlock-info cell_text" style="background:#F5F5F9">
            <div class="weui-panel-hd">
                <img src="../images/success@2x.png" alt="" style="width: 25px;vertical-align: middle;">
                <span class="unlocked-height">车辆已解锁</span>
            </div>
            <div class="weui-panel-db" style="margin-top: 10px;">
                <span class="note">提示：车辆已解锁，月卡车可直接离场！</span>
            </div>
        </div>

        <div class="weui-panel down cell_text">
            <!-- 轮播图 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide ad"><img class="ad" src="../images/ad-page@2x.png" alt=""></div>
                    <div class="swiper-slide ad"><img class="ad" src="../images/ad-page@2x.png" alt=""></div>
                    <div class="swiper-slide ad"><img class="ad" src="../images/ad-page@2x.png" alt=""></div>
                </div>
                <div class="swiper-pagination"></div>
                <!-- <img class="ad" src="../images/ad-page@2x.png" alt=""> -->
                <p class="tip">车辆锁定/解锁功能说明</p>
                <p class="desc">车辆锁定(解锁)功能，车主点击“锁定”按钮，通过平台下达限制离场指定，在车主没有点击“解锁”按钮时，出口道闸不予放行，反之放行</p>
            </div>

        </div>
        <script src="../js/jquery-ui.js"></script>
        <script src="../js/common.js"></script>
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script src="../js/weui.min.js"></script>
        <script src="../js/swiper.min.js"></script>
        <script src="../js/base64.js"></script>
        <script>
            var state = get_querystring("state");
            var auth_code = get_querystring("auth_code") || get_querystring("code") || undefined;
            var plate = get_querystring("plate");
            var payurl = null;
            var area = null;
            var openid = get_querystring("openid");
            var billdata = null;
            var price = null;
            var billtime = null;
            var coupon = null;
            var coupon_type = {
                1: ['时长券', '小时', '../personal/coupon/imgs/coupon_time.png'],
                2: ['现金券', '元', '../personal/coupon/imgs/coupon_money.png'],
                3: ['折扣券', '折', '../personal/coupon/imgs/coupon_discount.png']
            }

            if (!plate && state) {
                plate = JSON.parse(Base64.decode(state)).plate;
            }
            plate = plate && plate.trim().toUpperCase() || null;

            alert(plate);
            //允许支付按钮的单击功能
            function enable_pay() {
                $('#temp_pay').on('click', function () {
                    payurl = `temporary_pay.html?plate=${plate}&state=${state}`;
                    payurl += `&openid=${openid}`;
                    payurl += `&auth_code=${auth_code}`;
                    window.location.href = payurl;
                });
            }

            //查询账单
            function query_bill() {
                $.ajax({
                    type: 'GET',
                    timeout: 3 * 1000,
                    url: `${hostname}${rest_domain}/mobilepay/wechat/parking/bill`,
                    data: {
                        auth_code: auth_code,
                        openid: openid,
                        area: area,
                        plate: plate,
                        couponid: coupon && coupon.id || undefined,
                        state: state,
                        config: window.location.href
                    },
                    success: function (resp) {
                        if (!resp || !resp.result) {
                            alert('查询支付账单失败');
                            // return;
                        }
                        var data = resp.data;
                        //先判断停车事件是不是为0
                        var in_duration = data.in_duration;
                        if (!in_duration) {
                            in_duration = 0;
                        }
                        //停车时间格式转换
                        var in_hour = parseInt(in_duration / 3600);
                        var in_minute = Math.ceil((in_duration % 3600) / 60);
                        var duration = human_time(in_duration);
                        //车牌号
                        // $("#car_num").html(data.car_number);
                        //进场时间
                        $("#intime").html(data.in_time);
                        //停车时长
                        $("#duration").html(duration);

                        if (data.redirect) {
                            window.location.href = data.redirect;
                            return;
                        }
                        openid = data.openid;
                        sessionStorage.setItem("openid", openid);

                        if (data.in_duration > 0) {
                            enable_pay();
                        }

                    },
                    error: function (resp) {
                        alert(resp.message);
                    }
                });
            }

            function next(plate) {
                //如果车牌号为0,直接返回
                if (!plate)
                    return;
                //将车牌号存为页面缓存
                sessionStorage.setItem('pay_plate', plate);
                //访问的的地址加上plate和state
                payurl = `temporary_pay.html?plate=${plate}&state=${state}`;
                payurl += `&openid=${openid}`;
                payurl += `&auth_code=${auth_code}`;
            }

            //获取车牌号所在的项目号
            function get_manager() {
                $.ajax({
                    type: "GET",
                    timeout: 3 * 1000,
                    url: `${hostname}${rest_domain}/mobilepay/wechat/parking/area?plate=${plate}&state=${state}`,
                    success: function (result, status) {
                        if (!result || !result.result) {
                            // alert('获取车牌号所在停车场失败');
                            // return;
                        }
                        area = parseInt(result.data);
                        query_bill();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                        // window.history.back();
                    }
                });

            }


            $(function () {

                get_manager();
                //储值卡跳转链接
                $('#stored_card').click(function () {
                    window.location.href = 'moneycard_recharge.html';
                });

                //月卡跳转链接
                $('#month_card').click(function () {
                    payurl = `../month_card/expired_monthcard.html?plate=${plate}&state=${state}`;
                    payurl += `&openid=${openid}`;
                    payurl += `&auth_code=${auth_code}`;
                    window.location.href = payurl;
                });
                let lock_num = 0;
                let lock_flag = false;
                $('#lock-car').click(function () {
                    //获取点击次数 
                    lock_num += 1;
                    if (lock_num % 3 == 1) {
                        $('.lock-img').attr("src", "../images/Locked state@2x.png");
                        $('.lock-text').removeClass('locked-all').addClass('locked').siblings().addClass('locked-other');
                        $('.locked-other').removeClass('locked-all').addClass('locked-other');
                        $('.unlock-info').css('display', 'none');
                        $('.lock-info').css('display', 'flex');
                        console.log(lock_num);
                        // $()
                    } else if (lock_num % 3 == 2) {
                        $('.lock-img').attr("src", "../images/Lock-unlock@2x.png");
                        $('.unlock-text').removeClass('locked-other').addClass('unlocked').siblings().addClass('locked-other');
                        $('.lock-info').css('display', 'none');
                        $('.unlock-info').css('display', 'flex');
                        console.log(lock_num);
                    } else {
                        $('.unlock-text').removeClass('unlocked');
                        $('.lock-text').removeClass('locked-other').addClass('locked-all');
                        $('.locked-other').removeClass('locked-other').addClass('locked-all');
                        $('.lock-info').css('display', 'none');
                        $('.unlock-info').css('display', 'none');
                    }
                });

                //轮播图

                var mySwiper = new Swiper('.swiper-container',
                    {
                        speed: 1000,//播放速度
                        autoHeight: true,
                        loop: true,//是否循环播放
                        setWrapperSize: true,
                        autoplay:
                        {
                            delay: 2000,
                            disableOnInteraction: false,
                        },
                        pagination: '.swiper-pagination',//分页
                        effect: 'slide',//动画效果
                    }
                );
            });
        </script>
</body>

</html>